import React, { useEffect, useState } from 'react'
import { Form, Input, Button, Select, Table, message, Popconfirm } from 'antd'
import { ApiOrder, ApiDelOrder, ApiSearchOrder } from '../../api'
const { Option } = Select

// 订单管理
const Index = () => {

    const [data, setData] = useState([])
    useEffect(() => {
        getList()
    }, [])

    // 获取订单数据
    const getList = () => {
        ApiOrder().then((res: any) => {
            setData(res.data.data);
        })
    }

    // 搜索事件
    const onFinish = (value: any) => {
        ApiSearchOrder({ username: value.username, state: value.state }).then((res: any) => {
            message.success(res.data.msg)
            setData(res.data.data);
        })
    }




    // 删除数据
    const delOrder = (record: any) => {
        ApiDelOrder({ id: record.id }).then((res: any) => {
            message.success(res.data.msg)
            getList()// 重新获取数据
        })
    }

    // table
    const columns: any = [
        {
            title: '序号',
            width: '10%',
            editable: true,
            render: (v: any) => {
                let index = data.findIndex((item: any) => item.id == v.id)
                // console.log(index, 'iiiii');
                return index + 1
            },
            align: 'center'
        },
        {
            title: '编号',
            dataIndex: 'number',
            width: '10%',
            editable: true,
            align: 'center'

        }, {
            title: '用户名',
            dataIndex: 'username',
            width: '15%',
            editable: true,
            align: 'center'

        }, {
            title: '手机号',
            dataIndex: 'tel',
            width: '15%',
            editable: true,
            align: 'center'

        },
        {
            title: '类型',
            dataIndex: 'type',
            width: '10%',
            editable: true,
            align: 'center'

        }, {
            title: '支付金额',
            dataIndex: 'pay',
            width: '10%',
            editable: true,
            align: 'center'

        }, {
            title: '支付时间',
            dataIndex: 'time',
            width: '10%',
            editable: true,
            align: 'center'

        },
        {
            title: '操作',
            dataIndex: 'operation',
            render: (text: any, record: any, index: any) => {
                return (
                    <Popconfirm
                        title="您确定要删除吗?"
                        onConfirm={() => delOrder(record)}
                        // onCancel={cancel}
                        okText="确定"
                        cancelText="取消"
                    >
                        <Button type="primary" danger>删除</Button>
                    </Popconfirm>

                )
            },
            align: 'center'

        },
    ]

    return (
        <div style={{ height: "80vh", display: 'flex', flexDirection: 'column' }}>

            {/* 搜素事件 */}
            <div style={{ display: 'flex', marginTop: '20px' }}>

                <Form name="horizontal_login" layout="inline" onFinish={onFinish}>

                    <Form.Item name="state" label="订单类型：" style={{ width: '200px' }}>
                        <Select>
                            <Option value="二手房出租">二手房出租</Option>
                            <Option value="有房出租">有房出租</Option>
                        </Select>
                    </Form.Item>

                    <Form.Item name="username" label="用户名">
                        <Input placeholder="请输入用户名" />
                    </Form.Item>

                    <Form.Item shouldUpdate>
                        {() => (
                            <Button
                                htmlType="submit"
                            >
                                查询
                            </Button>
                        )}
                    </Form.Item>

                </Form >

            </div >

            {/* 表格 */}
            <div style={{ marginTop: '10px', height: '80%', overflowY: 'scroll' }}>
                <Form component={false}>
                    <Table
                        bordered
                        dataSource={data}
                        columns={columns}
                        rowClassName="editable-row"
                        rowKey='id'

                    />
                </Form>
            </div>
        </div >
    )
}
export default Index

